<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/login.css">
</head>
<body>
    <div class="nav-bar">
    <div class="back">
      <a href="index.html">
        <i class="iconfont icon-zuojiantou"></i>
      </a>
    </div>
    <a href="#" class="register">注册</a>
  </div>

  <!-- 登录头部模块 -->
  <div class="login-header">
    <h1>密码登录</h1>
    <a href="#">手机验证码登录<i class="iconfont icon-youjiantou"></i></a>
  </div>

  <!-- 表单模块 -->
  <form action="" class="login-form" autocomplete="off">
    <div class="row">
      <!-- tel在移动端是数字键盘 -->
      <input type="tel" placeholder="请输入手机号">
    </div>
    <div class="row">
      <input type="password" placeholder="请输入密码">
      <img src="./img/eye-off.svg" alt="">
    </div>
    <div class="row agree">
      <i class="iconfont icon-ico2"></i> 我已同意 <a href="#">用户协议</a> 及 <a href="#">隐私协议</a>
    </div>
    <button class="login-btn">登录</button>
    <p class="forget"><a href="#">忘记密码？</a></p>
  </form>
  <!-- 第三方登录模块 -->
  <div class="third-login">
    <p>
      <span>第三方登录</span>
    </p>
    <a href="#"> <img src="./img/qq.svg" alt=""></a>
  </div>
  <script src="./js/flexible.js"></script>
</body>
</html>